<!--
 * @Author: 吴世扬
 * @Date: 2023-03-08 09:06:17
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-04-09 11:27:15
 * @FilePath: /vue3-admin/src/components/ui/CustomCard/CustomCard.vue
 * @Description: 定制card
-->

<script lang="ts" setup>
import { ref } from 'vue';
const props = withDefaults(
    defineProps<{
        title: string | string[];
        canCollapse?: boolean;
        canDisabled?: boolean;
    }>(),
    {
        canCollapse: true,
        canDisabled: false
    }
);
const emits = defineEmits<{
    (
        event: 'success',
        title: string | string[],
        activeNames: string[],
        clickTitle: string
    ): void;
    (event: 'title', clickTitle: string): void;
}>();

const activeNames = ref(['1']);
const clickTitle = ref('');

const clickTitleTab = (item: any) => {
    clickTitle.value = item;
    emits('title', item);
};
const chiceTitle = (index: any, item: any) => {
    if (!clickTitle.value && index === 0) return 'c-1B1B20';
    if (clickTitle.value === item) return 'c-1B1B20';
    return '';
};
</script>

<template>
    <div class="custom-card-container">
        <el-collapse v-model="activeNames" v-if="props.canCollapse">
            <el-collapse-item
                name="1"
                :disabled="canDisabled"
                @click.stop="
                    () => {
                        emits('success', props.title, activeNames, clickTitle);
                    }
                "
            >
                <template #title>
                    <slot name="title">
                        <div v-if="props.title">
                            <div
                                v-if="
                                    props.title instanceof Array &&
                                    props.title.length > 0
                                "
                                class="flex-row"
                            >
                                <div
                                    v-for="(item, index) in props.title"
                                    :key="index"
                                    class="mr20 f16 title_box"
                                    @click.stop="() => clickTitleTab(item)"
                                >
                                    <div
                                        :style="{
                                            'margin-right':
                                                index > 0 ? '20px' : ''
                                        }"
                                    >
                                        {{ index > 0 ? '|' : '' }}
                                    </div>
                                    <div :class="chiceTitle(index, item)">
                                        {{ item }}
                                    </div>
                                </div>
                            </div>
                            <div v-else class="f16">
                                {{
                                    typeof props.title === 'string'
                                        ? props.title
                                        : ''
                                }}
                            </div>
                        </div>
                    </slot>
                </template>
                <slot></slot>
            </el-collapse-item>
        </el-collapse>
        <div class="card" v-else>
            <slot></slot>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.custom-card-container {
    padding: 0 20px;
    background: var(--front-background);
    border-radius: 8px;

    :deep(.el-collapse) {
        border: none;

        .el-collapse-item__wrap {
            border: none;
        }

        .el-collapse-item__header {
            border: none;
        }
    }

    .card {
        padding: 20px 0;
        border-radius: 8px;
    }

    .title_box {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}
</style>
